Los dashboards o tableros de Quarto son archivos HTML que pueden ser:
Estáticos Se representan una sola vez y los datos no cambian - pueden incluir elementos dinámicos.
Programados Se representan a partir de un cronograma donde los datos se actualizan
Parametrizados Se modifican a partir de parámetros
Interactivo Mediante Shiny - requieren de servidor especial
Cabecera YAML
El formato de la cabecera YAML de los tableros de Quarto es dashboard.
---title:"Mi tablero"format: dashboard---
La salida generada es HTML y la estructura se asemeja al uso del paquete flexdashboard de RMarkdown.
Se puede definir como será la orientación y si se habilita el scrolling de la página.
Otras opciones específicas de la cabecera YAML para tableros son los logotipos y los botones de navegación.
Cabecera YAML
Se reconocen alias para botones especiales predeterminados: linkedin, facebook, reddit, twitter y github. También se pueden crear botones personalizados a partir de íconos bootstrap.
Barra de navegación: ícono, título y autor junto con enlaces a subpáginas (si se define más de una página).
Páginas, filas, columnas y conjuntos de pestañas: las páginas, filas y columnas se definen mediante encabezados de Markdown (con atributos opcionales para controlar la altura, el ancho, etc.). Los conjuntos de pestañas se pueden utilizar para dividir aún más el contenido dentro de una fila o columna.
Tarjetas, barras laterales y barras de herramientas: las tarjetas son contenedores para gráficos, visualización de datos y contenido de formato libre. El contenido de las tarjetas generalmente se asigna a celdas en el documento fuente. Las barras laterales y las barras de herramientas se utilizan para presentar entradas dentro de tableros interactivos.
Diseño
Los elementos de diseño básico son paginas, filas, columnas y pestañas.
Las paginas se definen con encabezados tamaño 1 (#)
Las filas y columnas se declaran con encabezados tamaño 2 (##)
Las pestañas utilizan la clase {.tabset} en filas tipo ## y cada pestaña se declara con un encabezado de tamaño 3 (###)
Las tarjetas que se ubican en las celdas que generan las filas, las columnas y/o las pestañas tienen un botón de expansión automático que maximiza la visualización.
Tarjetas - contenido
La sintaxis de una tarjeta incluída en el diseño de página de un tablero tiene la forma:
:::{.card title="Título de la tarjeta"}Aquí va el texto o elemento markdown / HTML a publicar:::
El contenido de las tarjetas puede ser cualquiera de los elementos vistos anteriormente en Quarto basados en markdown o código HTML puro. También es útil incorporar valores dinámicos mediante código en línea.
Cajas de valor
Los cajas de valor son una excelente forma de mostrar valores simples de manera destacada dentro de un tablero.
Cajas de valor
La sintaxis dentro de un fragmento de código R tiene la siguiente estructura:
```{r}#| content: valuebox #| title: "Texto de la caja de valor" list( icon = "nombre-icono", color = "color de la caja", value = valor a mostrar))```
Los íconos pueden ser cualquiera de los 2000 disponibles en íconos de bootstrap
En color puede especificarse alguno de la paleta general hexadecimal o con palabras reservadas tipo primary, success, danger, etc. Estos colores variaran según el tema estético aplicado al tablero.
Cajas de valor
También se pueden crear cajas de valores usando Markdown simple, en cuyo caso normalmente se incluye el valor mediante una expresión en línea. Por ejemplo:
## Row:::{.valuebox icon="heart-pulse-fill" color="danger"}Cantidad de enfermos´{r} enfermos´:::
Tablas desde código
Se pueden incluir tablas dentro de estos tableros de dos formas:
Como una presentación tabular simple
Como un widget interactivo que incluya, por ejemplo ordenamiento y filtrado.
Si lo que se quiere mostrar es una cantidad pequeña de observaciones se puede utilizar funciones de knitr o flextable sin problemas.
```{r}knitr::kable(datos)# o con flextabledatos |> flextable()```
Estas tablas tendrán composición Markdown simples y llenan automáticamente al contenedor (desplazándose horizontal y verticalmente según sea necesario).
Tablas desde código
Si la tabla que queremos mostrar tiene muchos registros o es conveniente que se pueda ordenar de formas ascendente o descendente por alguna/s variable/s o hacer alguna busqueda particular, tenemos que hacer uso de algún paquete que incluya cierta interactividad.
Por ejemplo, el paquete DT, esta basado en una interfaz de JavaScript DataTables y agrega filtrado, paginación y ordenamiento a sus salidas.
```{r}library(DT)datatable(datos)```
Tablas desde código
Gráficos desde código
Los gráficos son los elementos más comunes mostrados en tableros. Al igual que las tablas pueden ser estáticos o dinámicos/interactivos.
Los estáticos serán gráficos generalmente producidos con ggplot2
Los dinámicos estarán basados en alguna librería de JavaScript que incluyen los paquetes especiales ggiraph, Plotly, highcharter, dygraphs, etc.
También hay algunas librerías para mostrar mapas como Leaflet o mapview
Gráficos desde código
Ejemplo con ggiraph
htmlwidgets
Estos componentes dinámicos / interactivos basados en JavaScript mostrados en los paquetes para tablas y gráficos anteriores pertenecen a htmlwidgets.
En el sitio https://www.htmlwidgets.org/ perteneciente a RStudio / Posit se encuentran publicada la galería de librerías disponibles.
Cada uno de los 132 paquetes citados tienen su propia página con la referencia de sus funciones, modo de uso, ejemplos, etc.
Estos componentes se pueden incluir en dashboards con y sin servidor Shiny asociado y también en documentos HTML de Quarto.
